<template>
  <div class="messageCustom beautify-scroll-def">
    <!-- 初始化内容 -->
    <template v-if="message.data && message.data.type === 'init'">
      <div id="u44_text" class="text">
        <p style="line-height: 20px">
          <span style="color: #f2f2f2"
            >您好！我是大瓦特安监应急监控AI 智能助手，能帮助您辅助监看作业视频、录入违章单等。</span
          >
        </p>
        <p style="line-height: 20px">
          <span style="color: #f2f2f2"
            >以下是我的常用能力指令示例，帮助您快速上手，欢迎尝试~</span
          >
        </p>
        <template v-for="item in initList" :key="item.title">
          <p style="line-height: 14px">
            <span style="color: #ffffff">{{item.title}}</span>
          </p>
          <p style="line-height: 14px" v-for="item2 in item.children" :key="item2.name">
            <span style="color: #f2f2f2">&nbsp;&nbsp; &nbsp;&nbsp; </span>
            <a @click="onClick(item2.name)" style="color: #02a7f0; cursor: pointer"
              >{{item2.name}}</a
            >
          </p>
        </template>
      </div>
    </template>

    <template v-else-if="!isObject(props.message.content)">
      <div>
        {{props.message.content}}
      </div>
    </template>

    <template v-else-if="isObject(props.message.content)">
      <!-- 文字 -->
      <p v-if="props.message.content.content">
        {{props.message.content.content}}
      </p>
      
      <!-- 表格 -->
      <div v-if="props.message.content.list.length">
        <Table :data="props.message.content.list" />
      </div>
      
      <!-- 描述 -->
      <div v-if="props.message.content.descriptions.length" class="contetn_rightonetop beautify-scroll-def">
        <el-descriptions :column="1">
          <el-descriptions-item v-for="item in props.message.content.descriptions" :key="item.label" :label="item.label">
            <template #default>
              {{item.value || '-'}}
            </template>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 选择的人 -->
      <div v-if="props.message.content.personList.length">
        <p style="line-height: 16px" v-for="item in props.message.content.personList" :key="item.name">
            <span style="color: #f2f2f2">&nbsp;&nbsp; &nbsp;&nbsp; </span>
            <a @click="onClick(item.name)" style="color: #02a7f0; cursor: pointer"
              >{{item.name}}</a
            >
          </p>
      </div>

    </template>

  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { ElInput, ElButton, ElIcon } from "element-plus";
import { Position } from "@element-plus/icons-vue";
import { aiApi } from "@/api";
import type { Message } from "../types/index";
import { useChatStore } from "@/stores/chat.ts";
import Table from "../views/components/Table";
import dayjs from 'dayjs';
import ai from "@/assets/ai.json";

const settingStore = useChatStore();
const { sendMessageClick, receiveMessage } = settingStore
const props = defineProps<{
  message: Message;
}>();
console.log(props.message.content,'props.message.content------');

const chatMessages = computed(() => settingStore.messages);

const emit = defineEmits<{
  (e: "send", value: string): void;
}>();

const isObject = (value)=> {
  return typeof value === 'object' && value !== null;
}

const initList = ref([
  {
    title: '1、辅助监看视频',
    children: [
      {
        name: '人员分数查询'
      },
    ]
  },
  {
    title: '2、违章单录入',
    children: [
      {
        name: '辅助录入违章单'
      },
    ]
  },
])
const onClick = (val) => {
  sendAi(val)
}

function getFirst4ChineseChars(str) {
    // 匹配汉字正则：[\u4e00-\u9fa5]
    const chineseChars = str.match(/[\u4e00-\u9fa5]/g) || [];
    return chineseChars.slice(0, 5).join('');
}

const sendAi = async (message: string)=>{
  const str1 = message.replace(/\s/g, '')
  const aiObj = ai.find(item => str1.includes(getFirst4ChineseChars(item.问)))
  if (str1 && aiObj) {
    console.log(aiObj.答);
    sendMessageClick(str1)
    setTimeout(()=>{
      receiveMessage(aiObj.答, false, true)
    }, 500)
    return
  }
  sendMessageClick(message)
  // console.log(chatMessages,'chatMessages----');
  
  const res = await aiApi({ message, chatMessages: chatMessages.value })
  if (res.success) {
    receiveMessage(res.data)
  }
}

// const inputText = ref('');
// const inputRef = ref<InstanceType<typeof ElInput> | null>(null);

// const placeholder = computed(() => {
//   return props.disabled ? '等待响应中...' : '输入您的问题...';
// });

// const handleEnter = (e: Event | KeyboardEvent) => {
//   // Only send on Enter without shift key
//   if (!(e instanceof KeyboardEvent) || !e.shiftKey && inputText.value.trim()) {
//     handleSend();
//   }
// };

</script>

<style scoped lang="scss">
.messageCustom {
  // max-height: 800px;


   .contetn_rightonetop {
    height: calc(100% - 66px);
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #58b1ff;
      font-size: 18px;
      font-weight: 600;
      line-height: 36px;
    }
    .content {
      font-size: 16px;
      display: flex;
      // align-items: center;
      > div {
        text-align: left;
        line-height: 24px;
      }
      :first-child {
        width: 80px;
      }
      :nth-child(2) {
        width: calc(100% - 80px);
      }
    }
    .descriptions-default-content{
      display: inline-grid;
    }
    .descriptions-click{
      color: #02a7f0;
      text-decoration: underline;
    }

    ::v-deep() {
      .el-descriptions__body{
        background-color: transparent;
      }
      .el-descriptions__label{
        color: white;
        font-weight: 600;
      }
      .el-descriptions__content{
        color: white;
      }
    }
  }
}
</style>
